<template>
  <section class="login-container">
    <div>
      <a href="/" class="iconfont icon-close1" ></a>
      <div class="user-head-img">
        快速注册
      </div>
      <div>
        <input class="input65" type="tel" v-model="phone" placeholder="请输入手机号">
      </div>
      <div>
        <input class="input65" type="password" v-model="pwd" placeholder="请输入密码">
      </div>
      <div class="orange-btn" @click="register()">
        注册
      </div>
      <a class="none-btn" href="/login/login">
        登录
      </a>
    </div>
  </section>
</template>

<script>
  import AppLogo from '~/components/AppLogo.vue'
  import modal from '~/components/modal.vue'
  import {userApi} from "../../api/user.js"
  export default {
    components: {
      AppLogo,modal
    },
    data(){
      return {
        phone:'',pwd:'',msg:{}
      }
    },
    mounted(){
    },
    methods:{
        register(){
            let that = this
            let user = {
                phone: this.phone,
                pwd: this.pwd
            }
            userApi.register(user).then(function (res) {
                that.msg={
                    type:2,text:"注册成功"
                }
                setTimeout(function () {
                  that.$router.push({path:'/'})
                },500)
            })
        },
        close(){

        }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/base.scss";
  .login-container {
    text-align: center;
    padding-top:60px;
    a.iconfont.icon-close1 {
      position:  absolute;
      top: 15px;
      right: 15px;
      text-decoration:  none;
      font-weight:  700;
      color: #fc3;
    }
    .user-head-img {
      line-height:  100px;
      font-size:  22px;
      color: #4a4a4a;
    }
    .input65 {
      line-height: 40px;
      border: 1px solid #f0f0f0;
      width: $size295;
      margin:8px auto;
      outline: none;
      padding:0 10px;
    }
  }
</style>
